<template>
    <view class="main-container">
        <!-- 加载状态遮罩 -->
        <view class="loading-overlay" v-if="isLoading">
            <view class="loading-spinner"></view>
            <text class="loading-text">{{ loadingText }}</text>
        </view>

        <!-- 顶部状态栏 -->
        <NavBar :userName="userName" :isLoggedIn="!!userName" :title="getActiveTabTitle()" />

        <!-- 主内容区域 -->
        <view class="content-area">
            <!-- 根据当前选中的tab显示对应的内容 -->
            <view v-if="activeTab === 'lifeReview'" class="tab-content">
                <view class="module-section">
                    <view class="module-header life-review-line">
                        <text class="module-title life-review-point">人生回顾</text>
                    </view>
                    <view class="function-cards">
                        <view class="function-card life-review-card1"
                            @click="navigateTo('/pages/lifeReview/personalStory')">
                            <view class="card-icon-wrapper personal-story-icon">
                                <image class="card-image" src="/assets/tabBar/storyCollection.png"></image>
                            </view>
                            <view class="card-content">
                                <text class="card-title">个人故事</text>
                                <text class="card-desc">查看患者个人故事</text>
                            </view>
                            <view class="card-arrow">
                                <text class="arrow-icon">›</text>
                            </view>
                        </view>
                        <view class="function-card life-review-card2"
                            @click="navigateTo('/pages/lifeReview/storyEdit')">
                            <view class="card-icon-wrapper story-edit-icon">
                                <image class="card-image" src="/assets/tabBar/storyCollection-active.png"></image>
                            </view>
                            <view class="card-content">
                                <text class="card-title">故事编辑</text>
                                <text class="card-desc">对故事进行补充修改</text>
                            </view>
                            <view class="card-arrow">
                                <text class="arrow-icon">›</text>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="module-section">
                    <view class="module-header memory-collection-line">
                        <text class="module-title memory-collection-point">记忆收集</text>
                    </view>
                    <view class="function-cards">
                        <view class="function-card memory-collection-card1"
                            @click="navigateTo('/pages/memoryCollection/storyCollection')">
                            <view class="card-icon-wrapper story-collection-icon">
                                <image class="card-image" src="/assets/tabBar/education.png"></image>
                            </view>
                            <view class="card-content">
                                <text class="card-title">故事收集</text>
                                <text class="card-desc">收集生命中的故事</text>
                            </view>
                            <view class="card-arrow">
                                <text class="arrow-icon">›</text>
                            </view>
                        </view>
                        <view class="function-card memory-collection-card2"
                            @click="navigateTo('/pages/memoryCollection/importantMoments')">
                            <view class="card-icon-wrapper important-moments-icon">
                                <image class="card-image" src="/assets/tabBar/education-active.png"></image>
                            </view>
                            <view class="card-content">
                                <text class="card-title">重要时刻</text>
                                <text class="card-desc">记录生命中重要时刻</text>
                            </view>
                            <view class="card-arrow">
                                <text class="arrow-icon">›</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <!-- <view v-if="activeTab === 'memoryCollection'" class="tab-content">
                <view class="module-section">
                    <view class="module-header">
                        <text class="module-title">记忆收集</text>
                    </view>
                    <view class="function-cards">
                        <view class="function-card memory-collection-card"
                            @click="navigateTo('/pages/memoryCollection/storyCollection')">
                            <view class="card-icon-wrapper story-collection-icon">
                                <image class="card-image" src="/assets/tabBar/education.png"></image>
                            </view>
                            <view class="card-content">
                                <text class="card-title">故事收集</text>
                                <text class="card-desc">收集生命中的故事</text>
                            </view>
                            <view class="card-arrow">
                                <text class="arrow-icon">›</text>
                            </view>
                        </view>
                        <view class="function-card memory-collection-card"
                            @click="navigateTo('/pages/memoryCollection/importantMoments')">
                            <view class="card-icon-wrapper important-moments-icon">
                                <image class="card-image" src="/assets/tabBar/education-active.png"></image>
                            </view>
                            <view class="card-content">
                                <text class="card-title">重要时刻</text>
                                <text class="card-desc">记录生命中重要时刻</text>
                            </view>
                            <view class="card-arrow">
                                <text class="arrow-icon">›</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view> -->

            <view v-if="activeTab === 'storyMuseum'" class="tab-content">
                <view class="module-section">
                    <!-- <view class="module-header">
                        <text class="module-title">生命故事博物馆</text>
                    </view> -->
                    <view class="function-cards">
                        <banner-swiper class="main-banner-swiper" :banners="banners"></banner-swiper>

                        <view class="function-card story-museum-card"
                            @click="navigateTo('/pages/storylibrary/education/index')">
                            <view class="card-icon-wrapper life-education-icon">
                                <image class="card-image" src="/assets/education.png"></image>
                            </view>
                            <view class="card-content">
                                <text class="card-title">生命教育</text>
                                <text class="card-desc">了解生命意义与价值</text>
                            </view>
                            <view class="card-arrow">
                                <text class="arrow-icon">›</text>
                            </view>
                        </view>
                        <view class="function-card story-museum-card"
                            @click="navigateTo('/pages/storylibrary/storyCollection/index')">
                            <view class="card-icon-wrapper life-story-icon">
                                <image class="card-image" src="/assets/tabBar/storyCollection.png"></image>
                            </view>
                            <view class="card-content">
                                <text class="card-title">生命故事</text>
                                <text class="card-desc">探索他人的生命故事</text>
                            </view>
                            <view class="card-arrow">
                                <text class="arrow-icon">›</text>
                            </view>
                        </view>
                        <view class="function-card story-museum-card"
                            @click="navigateTo('/pages/storylibrary/activity/index')">
                            <view class="card-icon-wrapper activity-icon">
                                <image class="card-image" src="/assets/tabBar/activity.png"></image>
                            </view>
                            <view class="card-content">
                                <text class="card-title">公益活动</text>
                                <text class="card-desc">参与生命相关的公益活动</text>
                            </view>
                            <view class="card-arrow">
                                <text class="arrow-icon">›</text>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <view v-if="activeTab === 'userCenter'" class="tab-content">
                <view class="module-section">
                    <!-- <view class="module-header">
                        <text class="module-title">个人中心</text>
                    </view> -->
                    <view class="user-profile">
<<<<<<< HEAD
                        <image class="profile-avatar" src="/static/avatar-default.png"></image>
=======
                        <image class="profile-avatar" :src="userInfo?.userAvatar || '/static/avatar-default.png'"></image>
>>>>>>> 73359ff (更新头像)
                        <view class="profile-info">
                            <text class="profile-name">{{ userName || '用户' }}</text>
                            <!-- <text class="profile-status">已收集故事: {{ storyCount || 0 }} 个</text> -->
                        </view>
                        <view class="profile-action" @click="navigateTo('/pages/userCenter/profile')">
                            <text>修改个人信息</text>
                        </view>
                    </view>
                    <!-- 添加退出登录按钮 -->
                    <view v-if="userName" class="logout-button" @click="logout">
                        <text>退出登录</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 底部导航栏 -->
        <view class="tab-bar">
            <view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ active: activeTab === tab.id }"
                @click="switchTab(tab.id)">
                <image class="tab-icon" :src="activeTab === tab.id ? tab.activeIcon : tab.icon"></image>
                <text class="tab-text">{{ tab.text }}</text>
            </view>
        </view>
    </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue';
import BannerSwiper from '@/components/BannerSwiper.vue'

export default {
    components: {
        NavBar,
        BannerSwiper
    },
    data() {
        return {
            banners: [
                { image: '/assets/education/life-concept.png' },
                { image: '/assets/education/life-meaning.png' },
                { image: '/assets/education/life-value.png' }
            ], // 轮播图数据
            activeTab: 'lifeReview', // 默认选中人生回顾
            userName: '',
<<<<<<< HEAD
=======
            userInfo: null,
>>>>>>> 73359ff (更新头像)
            storyCount: 0,
            isLoading: true, // 加载状态
            loadingText: '加载中...', // 加载文本
            pageTransition: false, // 页面切换动画控制
            tabs: [
                {
                    id: 'lifeReview',
                    text: '人生故事',
                    icon: '/assets/tabBar/storyCollection.png',
                    activeIcon: '/assets/tabBar/storyCollection-active.png'
                },
                // {
                //     id: 'memoryCollection',
                //     text: '记忆收集',
                //     icon: '/assets/tabBar/education.png',
                //     activeIcon: '/assets/tabBar/education-active.png'
                // },
                {
                    id: 'storyMuseum',
                    text: '故事博物馆',
                    icon: '/assets/tabBar/activity.png',
                    activeIcon: '/assets/tabBar/activity-active.png'
                },
                {
                    id: 'userCenter',
                    text: '个人中心',
                    icon: '/assets/tabBar/user.png',
                    activeIcon: '/assets/tabBar/user-active.png'
                }
            ]
        }
    },
    onLoad() {
        // 从本地存储获取用户信息
        const userInfo = uni.getStorageSync('userInfo');
        if (userInfo && userInfo.isLoggedIn) {
            this.userName = userInfo.userName;
<<<<<<< HEAD
=======
            this.userInfo = userInfo;
>>>>>>> 73359ff (更新头像)
        }

        // 模拟加载其他信息
        setTimeout(() => {
            this.storyCount = 5;
            this.isLoading = false;
        }, 800);

        // 监听存储变化事件，实时更新用户名
        uni.$on('storage-changed', this.updateUserInfo);
    },
    // 在页面显示时获取最新用户信息
    onShow() {
        // 每次页面显示时都获取最新的用户信息
        this.updateUserInfo();
    },
    // 在页面卸载时移除事件监听
    onUnload() {
        uni.$off('storage-changed', this.updateUserInfo);
    },
    methods: {
        switchTab(tabId) {
            if (this.activeTab === tabId) return;

            // 添加页面切换动画
            this.isLoading = true;
            this.loadingText = '切换中...';
            setTimeout(() => {
                this.activeTab = tabId;
                setTimeout(() => {
                    this.isLoading = false;
                }, 300);
            }, 200);
        },
        navigateTo(url) {
            // 添加页面跳转前的加载动画
            this.isLoading = true;
            setTimeout(() => {
                uni.navigateTo({
                    url: url,
                    success: () => {
                        this.isLoading = false;
                    },
                    fail: () => {
                        this.isLoading = false;
                        uni.showToast({
                            title: '页面跳转失败',
                            icon: 'none'
                        });
                    }
                });
            }, 300);
        },
        // 下拉刷新
        onPullDownRefresh() {
            this.isLoading = true;
            this.loadingText = '刷新中...';
            setTimeout(() => {
                // 模拟数据刷新
                this.storyCount += 1;
                this.isLoading = false;
                uni.stopPullDownRefresh();
                uni.showToast({
                    title: '刷新成功',
                    icon: 'success'
                });
            }, 1000);
        },

        // 获取当前标签页的标题
        getActiveTabTitle() {
            const activeTab = this.tabs.find(tab => tab.id === this.activeTab);
            if (activeTab) {
                return activeTab.text;
            }
            return '故事合集';
        },

        // 更新用户信息
        updateUserInfo() {
            const userInfo = uni.getStorageSync('userInfo');
            if (userInfo && userInfo.isLoggedIn) {
                this.userName = userInfo.userName;
<<<<<<< HEAD
=======
                this.userInfo = userInfo;
>>>>>>> 73359ff (更新头像)
            }
        },

        // 移除了显示通知面板方法

        // 退出登录
        logout() {
            uni.showModal({
                title: '提示',
                content: '确定要退出登录吗？',
                success: (res) => {
                    if (res.confirm) {
                        // 清除用户信息
                        uni.removeStorageSync('userInfo');
                        this.userName = '';
<<<<<<< HEAD
=======
                        this.userInfo = null;
                        // 触发存储变化事件
                        uni.$emit('storage-changed'); 
>>>>>>> 73359ff (更新头像)
                        // 显示退出成功提示
                        uni.showToast({
                            title: '已退出登录',
                            icon: 'success',
                            duration: 1500,
                            success: () => {
                                // 重置当前页面状态
                                this.activeTab = 'lifeReview';
                                // 延迟执行，确保提示显示完成
                                setTimeout(() => {
                                    // 使用reLaunch返回到系统首页（登录欢迎页）
                                    uni.reLaunch({
                                        url: '/pages/login/welcome'
                                    });
                                }, 1500);
                            }
                        });
                    }
                }
            });
        }
    }
}
</script>

<style>
/* 全局样式变量 */
:root {
    /* --primary-color: #44b79b !important; */
    --primary-light: #e8f5e9;
    --secondary-color: #70de87;
    --text-primary: #333333;
    --text-secondary: #666666;
    --text-light: #999999;
    --bg-color: #f5f5f5;
    --card-bg: #ffffff;
    --card-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    --transition-speed: 0.3s;
}

.main-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--bg-color);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.content-area {
    flex: 1;
    padding-top: 30rpx;
    overflow-y: auto;
    padding-bottom: 120rpx;
    /* 为底部导航栏留出空间 */
    transition: all var(--transition-speed) ease;
}

.tab-content {
    height: 100%;
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20rpx);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 加载状态样式 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.loading-spinner {
    width: 80rpx;
    height: 80rpx;
    border: 6rpx solid var(--primary-light);
    border-top: 6rpx solid #44b79b;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: var(--text-secondary);
}

/* 顶部状态栏样式 */
.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 30rpx;
    background-color: var(--card-bg);
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    position: relative;
    z-index: 10;
}

.welcome-text {
    font-size: 32rpx;
    font-weight: 500;
    color: var(--text-primary);
    background: linear-gradient(to right, #44b79b, #70de87);
    -webkit-background-clip: text;
    color: transparent;
}

/* 模块样式 */
.module-section {
    background-color: var(--card-bg);
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25rpx;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 20rpx;
    position: relative;
}

/* .life-review-line ::after {
    background-color: #258450 !important;
}

.memory-collection-line ::after {
    background-color: #5887cd !important;
} */

.module-header ::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 60rpx;
    height: 4rpx;
    /* background-color: #44b79b !important; */
    background-color: #258450;
    border-radius: 4rpx;
}

.module-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #000;
    display: flex;
    align-items: center;
}

.module-title::before {
    content: '';
    display: inline-block;
    width: 13rpx;
    height: 13rpx;
    background-color: #70de87;
    border: 5rpx solid #258450;
    margin-right: 14rpx;
    border-radius: 20rpx;
}

.life-review-point::before {
    content: '';
    display: inline-block;
    width: 13rpx;
    height: 13rpx;
    background-color: #5abba4;
    border: 5rpx solid #359e77;
    margin-right: 14rpx;
    border-radius: 20rpx;
}

.memory-collection-point::before {
    content: '';
    display: inline-block;
    width: 13rpx;
    height: 13rpx;
    background-color: #6eb0dc;
    border: 5rpx solid #5887cd;
    margin-right: 14rpx;
    border-radius: 20rpx;
}

/* 功能卡片样式 */
.function-cards {
    display: flex;
    flex-direction: column;
    gap: 30rpx;
    margin: 0;
}

.function-card {
    width: calc(100% - 46rpx);
    height: 170rpx;
    background-color: #ffffff;
    border-radius: 16rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.25);
    transition: all 0.2s ease;
    position: relative;
    border: none;
}

.card-icon-wrapper {
    width: 64rpx;
    height: 64rpx;
    border-radius: 12rpx;
    margin-right: 16rpx;
    box-shadow: none;
}

.card-image {
    width: 36rpx;
    height: 36rpx;
}

.card-content {
    flex: 1;
    margin-right: 12rpx;
}

.card-title {
    font-size: 28rpx;
    margin-bottom: 4rpx;
}

.card-desc {
    font-size: 24rpx;
    color: var(--text-secondary);
    line-height: 1.2;
}

.card-arrow {
    width: 32rpx;
    height: 32rpx;
    opacity: 0.4;
}

.arrow-icon {
    font-size: 28rpx;
}

.function-card:active {
    transform: translateY(1rpx);
    background-color: #fafafa;
}

/* 卡片类型样式 */
.life-review-card1 {
    background: #ffffff;
    border-left: 12rpx solid #359e77;
}

.life-review-card2 {
    background: #ffffff;
    border-left: 12rpx solid #5abba4;
}

.memory-collection-card1 {
    background: #ffffff;
    border-left: 12rpx solid #6eb0dc;
}

.memory-collection-card2 {
    background: #ffffff;
    border-left: 12rpx solid #5887cd;
}

.memory-collection-card {
    background: #ffffff;
    border-left: 12rpx solid #ef7171;
}

.story-museum-card {
    background: #ffffff;
    border-left: 12rpx solid #ff9500;
}

/* 卡片悬停和点击效果 */
.function-card:active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

/* 卡片图标包装器 */
.card-icon-wrapper {
    width: 160rpx;
    height: 160rpx;
    border-radius: 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 40rpx;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.08);
}

/* 不同图标的背景色 */
.personal-story-icon {
    background: #3ba17b55;
}

.story-edit-icon {
    background: #5abba433;
}

.story-collection-icon {
    background: #6eb0dc55;
}

.important-moments-icon {
    background: #5887cd55;
}

.life-education-icon {
    background: #fff3e0;
}

.life-story-icon {
    /* background: #f1f8e9; */
    background: #fff3e0;
}

.activity-icon {
    /* background: #e8eaf6; */
    background: #fff3e0;
}

.card-image {
    width: 65rpx;
    height: 65rpx;
    transition: transform 0.3s ease;
    z-index: 2;
}

.function-card:active .card-image {
    transform: scale(1.1);
}

/* 卡片内容区域 */
.card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-title {
    font-size: 34rpx;
    font-weight: bold;
    margin-bottom: 8rpx;
    color: var(--text-primary);
    z-index: 2;
}

.card-desc {
    font-size: 28rpx;
    color: var(--text-secondary);
    line-height: 1.3;
    z-index: 2;
    margin-top: 15rpx;
}

/* 卡片箭头 */
.card-arrow {
    width: 36rpx;
    height: 36rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.arrow-icon {
    font-size: 42rpx;
    font-weight: bold;
    color: var(--text-secondary);
}

.function-card:active .card-arrow {
    transform: translateX(4rpx);
    opacity: 0.8;
}

/* 响应式调整 */
@media screen and (max-width: 375px) {
    .function-card {
        width: 100%;
        margin: 0 0 20rpx;
    }
}

/* 添加卡片动画效果 */
@keyframes cardPulse {
    0% {
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    }

    50% {
        box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
    }

    100% {
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
    }
}

.function-card:hover {
    animation: cardPulse 2s infinite;
}

/* 用户资料样式 */
.user-profile {
    display: flex;
    align-items: center;
    padding: 30rpx;
    background: linear-gradient(135deg, #f9f9f9 0%, #ffffff 100%);
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.user-profile::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 200rpx;
    height: 200rpx;
    background: radial-gradient(circle, rgba(26, 173, 25, 0.1) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
}

.profile-avatar {
    width: 140rpx;
    height: 140rpx;
    border-radius: 70rpx;
    margin-right: 30rpx;
    border: 6rpx solid #ffffff;
    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.1);
}

.profile-info {
    flex: 1;
}

.profile-name {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 12rpx;
    color: var(--text-primary);
}

.profile-status {
    font-size: 26rpx;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
}

.profile-status::before {
    content: '';
    display: inline-block;
    width: 12rpx;
    height: 12rpx;
    background-color: #44b79b;
    border-radius: 50%;
    margin-right: 8rpx;
}

.profile-action {
    background-color: #44b79b;
    color: #fff;
    padding: 12rpx 24rpx;
    border-radius: 40rpx;
    font-size: 26rpx;
    box-shadow: 0 4rpx 8rpx rgba(26, 173, 25, 0.2);
    transition: all 0.3s ease;
    z-index: 99;
}

.profile-action:active {
    transform: scale(0.95);
    box-shadow: 0 2rpx 4rpx rgba(26, 173, 25, 0.2);
}

/* 退出登录按钮样式 */
.logout-button {
    margin-top: 30rpx;
    background-color: #f5f5f5;
    color: #dd524d;
    padding: 20rpx 0;
    border-radius: 12rpx;
    text-align: center;
    font-size: 30rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.logout-button:active {
    transform: scale(0.98);
    background-color: #f8f8f8;
}

/* 底部导航栏样式 */
.tab-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 110rpx;
    background-color: #ffffff;
    box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.08);
    z-index: 999;
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
    padding: 0 20rpx;
}

.tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10rpx 0;
    position: relative;
    transition: all 0.3s ease;
}

.tab-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 4rpx;
    background-color: #44b79b;
    border-radius: 4rpx;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.tab-item.active::after {
    width: 40rpx;
}

.tab-icon {
    width: 52rpx;
    height: 52rpx;
    margin-bottom: 6rpx;
    transition: all 0.3s ease;
}

.tab-item.active .tab-icon {
    transform: translateY(-4rpx);
}

.tab-text {
    font-size: 24rpx;
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.tab-item.active .tab-text {
    color: #44b79b;
    font-weight: bold;
    transform: scale(1.05);
}

.main-banner-swiper {
    margin: 30rpx 0 15rpx 0;
}
</style>